<%--
  Created by IntelliJ IDEA.
  User: Elle
  Date: 2022/7/7
  Time: 10:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用jQuery实现ajax</title>
</head>
<body>

<table>
    <tr>
        <td>姓名</td>
        <td>状态<td/>
        <td>操作</td>
    </tr>
    <tr>
        <td>张三</td>
        <td id="zhagnsan">不合格</td>
        <td>
            <a href="javascript:pass(1,'zhagnsan')">通过</a>
            <a href="javascript:void(1); " onclick="del(this)">删除</a>
        </td>
    </tr>
    <tr>
        <td>李四</td>
        <td id="lisi">不合格</td>
        <td>
            <a href="javascript:pass(2,'lisi')">通过</a>
        </td>
    </tr>
</table>

<script src="js/jquery-3.5.1.min.js" type="text/javascript"></script>
<script>
    function pass(id,changeid) {
        console.log(id);

        //发送请求==》servlet==》调用方法--》持久化操作==》响应结果
        $.ajax({
            url:"ZanServlet",  //请求的路径，必须
           // type:'get',  //请求的路径类型 get /post
            data:"id=1",  //请求的路径数据
            dataType:"json",  //响应的数据类型==》servlet中响应的数据类型
            success:function(ret){  // 成功后的回调函数，ret响应的数据
                console.log(ret);
                if(ret == 'ok'){
                    document.getElementById(changeid).innerText = "合格";
                }
            },
            error:function(ret){
                console.log(ret);
            }
        });

    }

    function del(obj){
       $(obj).parents("tr").remove();
    }
</script>

</body>
</html>
